<div class="audit_container">
    <div class="header" nz-row nzGutter="16">
        <div class="row_2">
            <div nz-col nzSpan="8" class="operate_btn">
                <button nz-button nzType="primary" (click)="showModal()" *ngIf="bornRole.add">
                    <i nz-icon nzType="plus"></i>新增
                </button>
                <button nz-button nzType="" (click)="showEditModal()" [disabled]="deleteIds.length !== 1"
                    [class]="deleteIds.length !== 1?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"
                    *ngIf="bornRole.edit">
                    <i nz-icon nzType="edit"></i>修改
                </button>
                <button nz-button nzType="" [disabled]="deleteIds.length === 0" (click)="delete()"
                    [class]="deleteIds.length === 0?'ant-btn ant-btn-primary disabledBg':'ant-btn ant-btn-primary'"
                    *ngIf="bornRole.del">
                    <i nz-icon nzType="delete"></i>删除
                </button>
            </div>
        </div>
        <div nz-col nzSpan="10"></div>
        <form nz-form #form (ngSubmit)="search()" class="ant-advanced-search-form">
            <div nz-col nzSpan="3">
                <nz-form-item nzFlex style="margin-bottom: 0;">
                    <!-- <nz-form-label>审批流程编码</nz-form-label> -->
                    <nz-form-control style="width: 100%;">
                        <input appHotSearch (hotSearchEmit)="getList()" nz-input placeholder="请输入审批流程编码"
                            name="auditCode" [(ngModel)]="auditCode" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col nzSpan="3">
                <nz-form-item nzFlex style="margin-bottom: 0;">
                    <!-- <nz-form-label>审批流程名称</nz-form-label> -->
                    <nz-form-control style="width: 100%;">
                        <input appHotSearch (hotSearchEmit)="getList()" nz-input placeholder="请输入审批流程名称"
                            name="auditName" [(ngModel)]="auditName" />
                    </nz-form-control>
                </nz-form-item>
            </div>
            <!-- <div nz-col nzSpan="4">
                    <nz-form-item nzFlex>
                        <nz-form-control>
                            <button nz-button type="submit" nzType="primary">搜索</button>
                        </nz-form-control>
                    </nz-form-item>
                </div> -->
        </form>
    </div>
    <div class="table-container">
        <nz-table #basicTable [nzData]="listData" nzFrontPagination="false" [nzBordered]="true" nzSize="small">
            <thead>
                <tr>
                    <th nzWidth="62px" nzShowCheckbox [(nzChecked)]="isAllChecked" [nzIndeterminate]="indeterminate"
                        (nzCheckedChange)="checkAll($event)"></th>
                    <th>流程编码</th>
                    <th>流程名称</th>
                    <th>审批等级</th>
                    <th>创建日期</th>
                    <th>备注</th>
                    <!-- <th nzAlign="center">操作</th> -->
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of basicTable.data">
                    <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]" (nzCheckedChange)="refreshStatus()"></td>
                    <td>{{ data.id }}</td>
                    <td>{{ data.name }}</td>
                    <td>{{ data.levelLabel }}</td>
                    <td>{{ data.createDate }}</td>
                    <td>{{ data.remarks }}</td>
                    <!-- <td nzAlign="center">
                        <button nz-button [nzSize]="10" nzType="link" (click)="showEditModal(data)">编辑</button>
                        <button nz-button [nzSize]="10" nzType="link" (click)="delete(data.id)">删除</button>
                    </td> -->
                </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-row class="page_box">
        <nz-pagination (nzPageIndexChange)="listPageChange($event)" [nzPageIndex]="pageIndex" [nzTotal]="listCount"
            [nzPageSize]="pageSize" [nzShowTotal]="totalTemplate"></nz-pagination>
        <ng-template #totalTemplate let-total> 总共 {{ listCount }} 条 </ng-template>
    </div>
</div>
<div id="modal_box"></div>
<nz-modal nzMaskClosable="false" appDragModal [nzGetContainer]="modalDomBox" class="hmodal" [(nzVisible)]="isShow" [nzTitle]="editId == -1 ? '添加流程':'编辑流程'" [nzFooter]="null"
    (nzOnCancel)="handleCancel()">
    <form nz-form [formGroup]="auditForm" (ngSubmit)="submitForm(); ">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">流程名称</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入流程名称">
                <input nz-input placeholder="请输入流程名称" formControlName="name" id="name" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">审批等级</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择审批等级">
                <nz-select nzPlaceHolder="请选择" formControlName="level" (ngModelChange)="levelChange($event)" nzDropdownClassName="select_custom">
                    <nz-option *ngFor="let item of levelData" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <div formArrayName="auditUser">
            <nz-form-item *ngFor="let item of auditUserArray.controls; let i=index">
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>{{ (i+1) | chinessNum }}审批人</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请选择审批人">
                    <nz-select [nzMode]="'multiple'" nzPlaceHolder="请选择" [formControlName]="i" nzDropdownClassName="select_custom">
                        <nz-option *ngFor="let $item of userListData" [nzLabel]="$item.nickName" [nzValue]="$item.id">
                        </nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
        </div>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="resultUser">结果抄送人</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入结果抄送人">
                <nz-select [nzMode]="'multiple'" nzPlaceHolder="请选择" formControlName="resultUser" nzDropdownClassName="select_custom">
                    <nz-option *ngFor="let item of userListData" [nzLabel]="item.nickName" [nzValue]="item.id">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="remark">备注信息</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <textarea rows="4" placeholder="请输入备注信息" nz-input formControlName="remark"></textarea>
            </nz-form-control>
        </nz-form-item>
        <div nz-row class="custome_modal_footer">
            <div nz-col nzSpan="24" style="text-align: right;">
                <button nz-button type="button" nzType="default" (click)="handleCancel()">取消</button>
                <button nz-button nzType="primary" [nzLoading]="isOkLoading">确定</button>
            </div>
        </div>
    </form>
</nz-modal>